<template>
  <view class="">
    <subtitle titleText="不良原因明细"></subtitle>
    <view class="mt-24rpx mr-48rpx ml-48rpx">
      <view
        class=""
        v-for="(item, index) in badnessList.reasonList"
        :key="index"
      >
        <view class="w-100% h-16rpx"></view>
        <view class="text1 mb-24rpx">
          {{ item.firstCode }}: {{ item.firstContent }}
        </view>
        <view class="flex-wrap-left">
          <view
            class="text2 w-50% mb-24rpx"
            v-for="(v, index) in item.items"
            :key="index"
          >
            {{ v.secondContent }}
          </view>
        </view>
      </view>
    </view>
    <view class="flex-wrap-left ml-36rpx" v-if="badnessList.imageList">
      <image
        class="w-200rpx h-200rpx mt-34rpx mr-32rpx"
        style="border: 2rpx solid rgba(0, 0, 0, 0.15)"
        v-for="(item, index) in badnessList.imageList"
        :key="index"
        :src="getImageUrl(item.imageUrl)"
        mode=""
        @click="previewImage(badnessList.imageList, index)"
      ></image>
    </view>
    <view class="w-100% h-16rpx" v-if="badnessList.imageList"></view>
    <view class="" v-if="badnessList.checkQuantity > 0">
      <subtitle titleText="检测数量"></subtitle>
      <view class="ml-32rpx mt-40rpx mishu">
        不合格数量（米）：{{ badnessList.checkQuantity }}
      </view>
    </view>
    <view
      class="mt-40rpx flex-wrap-top ml-32rpx mr-32rpx"
      v-if="badnessList.remark"
    >
      <view class="remark1"> 备注： </view>
      <view class="remark2 w-614rpx" style="display: inline-block">
        {{ badnessList.remark }}
      </view>
    </view>
    <view class="ml-32rpx mt-40rpx mt-10rpx" v-if="dataList?.checkFinal > 0">
      <span class="jielun1"> 结论： </span>
      <span v-if="dataList?.checkFinal === 1" class="jielun2">返修</span>
      <span v-if="dataList?.checkFinal === 2" class="jielun2">报废</span>
      <span v-if="dataList?.checkFinal === 3" class="jielun2">特采</span>
    </view>
    <view class="ml-32rpx mr-32rpx flex-left" v-if="badnessList?.checkReel !== 0">
      <view class="uploadspan1"> 不合格（卷数）：</view>
      <view class="uploadspan1"> {{ badnessList?.checkReel }} </view>
    </view>
    <view class="w-100% h-80rpx"></view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from "vue";
import { BASE_URL } from "@/config";
import subtitle from "@/components/subtitle.vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/store/index";
const store = useCounterStore();
const { huanjing } = storeToRefs(store);

const props = defineProps<{
  badnessList?: Object;
  dataList?: Object;
}>();

const { badnessList, dataList } = toRefs(props);
function getImageUrl(imageUrl: string) {
  if (huanjing.value === "local") {
    return `${BASE_URL}/pad/${imageUrl}`;
  } else if (huanjing.value === "fat") {
    return `http://10.10.113.30:10000/aipu/${imageUrl}`;
  } else if (huanjing.value === "preannouncement") {
    return `http://172.16.197.14:10000/aipu/${imageUrl}`;
  } else if(huanjing.value === 'prod'){
		return `http://172.16.197.56:10000/aipu/${imageUrl}`
	}
}

function previewImage(files: [], index: string) {
  const photoList = files.map((item) => getImageUrl(item.imageUrl));
  uni.previewImage({
    current: index,
    urls: photoList,
    indicator: "number",
  });
}
</script>

<style scoped>
.text1 {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1e1f22;
}

.text2 {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4b4d55;
}

.remark1 {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1e1f22;
}

.remark2 {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4b4d55;
  word-wrap: break-word;
}

.mishu {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1e1f22;
}

.jielun1 {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1e1f22;
}

.jielun2 {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #e52b2b;
}

::v-deep .u-checkbox__icon-wrap--square {
  border-radius: 2rpx;
}
</style>
